<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>拼图游戏</title>
	<script src = "../js/jquery.min.js"></script>
</head>
<body>
	<center>
		<div><canvas id="canvas" width="600" height="445">您的浏览器不支持canvas标签</canvas></div>
		<div><img src="../images/cat.jpg" width="400" height="250" /></div>
	</center>
	<script>
		var canv = document.getElementById("canvas");
		var ctx = canv.getContext("2d");
		// 创建图片对象
		var img = new Image();
		img.src = "../images/cat.jpg";
		ctx.drawImage(img,0,0);
		// 等待加载完成再绘制
		img.onload = function(){
			RandomPic();
			drawPic();
		};
		
		// 创建二维数组
		var matrix = [
			[ 0, 1, 2, 3, 4, 5],
			[ 6, 7, 8, 9,10,11],
			[12,13,14,15,16,17],
			[18,19,20,21,22,23],
			[24,25,26,27,28,30]
		];

		// 空白块对象
		var whiteBlock = {
			row : 4,
			col : 5
		};
		
		// 绘制图片
		// drawImage(img,PicCutX,PicCutY,PicSizeX,PicSizeY,ShowPicX,ShowPicY,ShowSizeX,ShowSizeY);
		// i,j的循环表示固定的位置。col,row表示移动后的位置（通过matrix[][]计算）。
		var drawPic = function(){
			// 清除canvas画布
			ctx.clearRect(0,0,600,450);
			for(var i=0;i<5;i++){
				for(var j=0;j<6;j++){
					if(matrix[i][j] != 30){
						var col = Math.floor(matrix[i][j]%6)*100;	// 600/6=100
						var row = Math.floor(matrix[i][j]/6)*89;	// 445/5=89
						ctx.drawImage(img,col,row,100,89,j*100,i*89,100,89);			
					}
				}
			}
			if(checkPic()){
				drawPerfect();
			}else{
				drawLine();
			}
		};
		
		// 绘制方格线条
		var drawLine = function(){
			ctx.beginPath();
			for(var i = 0;i < 7;i++){
				ctx.moveTo(i*100,0);
				ctx.lineTo(i*100,445);
				ctx.moveTo(0,i*89);
				ctx.lineTo(600,i*89);
			}
			ctx.stroke();
		};


		// 封装移动函数
		// left
		var moveLeft = function(){
			if(whiteBlock.col != 5){	
				console.log("空白右侧图像左移");
				// 空白右侧图像左移
				matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row][whiteBlock.col + 1];
				whiteBlock.col += 1;
				matrix[whiteBlock.row][whiteBlock.col] = 30;
			}
		};
		// up
		var moveUp = function(){
			if(whiteBlock.row != 4){	
				// 空白下方图像上移
				console.log("空白下方图像上移");
				matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row + 1][whiteBlock.col];
				whiteBlock.row += 1;
				matrix[whiteBlock.row][whiteBlock.col] = 30;
			}
		};
		// right
		var moveRight = function(){
			if(whiteBlock.col != 0){
				console.log("空白左侧图像右移");
				// 空白左侧图像右移
				matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row][whiteBlock.col - 1];
				whiteBlock.col -= 1;
				matrix[whiteBlock.row][whiteBlock.col] = 30;
			}
		};
		// down
		var moveDown = function(){
			if(whiteBlock.row != 0){
				// 空白上方图像下移
				console.log("空白上方图像下移");
				matrix[whiteBlock.row][whiteBlock.col] = matrix[whiteBlock.row - 1][whiteBlock.col];
				whiteBlock.row -= 1;
				matrix[whiteBlock.row][whiteBlock.col] = 30;
			}
		};


		// 打乱图片
		var RandomPic = function(){
			while(true){
				var dirction = Math.floor(Math.random()*4);
				switch(dirction){
					case 0: moveLeft(); break;
					case 1: moveUp(); break;
					case 2: moveRight(); break;
					case 3: moveDown(); break;
				}
				// 可改进为：左上角->左下角->右下角 / 改进算法打乱matrix矩阵(不能保证可恢复性)
				if(whiteBlock.row == 4 && whiteBlock.col == 0){
					break;
				}
			}
		};

		// 判断图片是否已排序(胜利)
		var checkPic = function(){
			for(var i = 0;i < 5;i++){
				for(var j = 0;j < 6;j++){
					if(i*6 + j != matrix[i][j] && i*6 + j != 29){
						return 0;
					}
				}
			}
			return 1;
		};

		// 打印perfect文字
		var drawPerfect = function(){
			ctx.font = "60px Comic Sans Ms";
			ctx.fillStyle = "Orange";
			ctx.textAlign = "center";
			ctx.textBaseline = "middle";
			ctx.fillText("PEFECT !",300,222.5);
			ctx.fillStyle = "Black";
		};

		// 键盘交互
		$("body").keydown(function(event){
			console.log(event.keyCode);
			if(event.keyCode == 37){
				moveLeft();
			}
			if(event.keyCode == 38){
				moveUp();
			}
			if(event.keyCode == 39){
				moveRight();
			}
			if(event.keyCode == 40){
				moveDown();
			}
			drawPic();
		});

		// 鼠标交互 <待增加>
		$("#canvas").click(function(event){
			// 获取点击的块的位置(matrix下标)
			var x = Math.floor(event.offsetX/100);
			var y = Math.floor(event.offsetY/89);
			console.log("("+x+","+y+")");
			// 获取白块和点击块的det值 
			detX = whiteBlock.col - x;
			detY = whiteBlock.row - y;
			// console.log("<"+detX+","+detY+">");
			// 如果符合移动条件,移动
			// 左
			if(detX == -1 && detY == 0){
				moveLeft();
			}
			// 上
			if(detX == 0 && detY == -1){
				moveUp();
			}
			// 右
			if(detX == 1 && detY == 0){
				moveRight();
			}
			// 下
			if(detX == 0 && detY == 1){
				moveDown();
			}
			drawPic();
		});
	</script>
</body>
</html>